<!--
 * @Author: Mcc
 * @Date: 2024-08-02 14:20:48
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-02 14:22:48
 * @FilePath: \ft-apply-admin\src\views\TrainList\components\batchModal.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->

<template>
  <div class="px-10" style="display:none;">
    <BasicModal v-bind="$attrs" :title="getTitle" @register="batchModal" @ok="handleSubmit">
        <BasicForm @register="registerForm">
          <!-- <template #trainTime="{ model, field }">
            <RangePicker style="width: 100%;" v-model:value="model[field]" :disabled-date="disabledDate" @change="onChange"
              @openChange="onOpenChange" @calendarChange="onCalendarChange"></RangePicker>
          </template>
          <template #testTimes="{ model, field }">
            <DatePicker style="width: 100%;" v-model:value="model[field]" @change="handleChangeYear" />
          </template> -->
        </BasicForm>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { computed, defineComponent, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { batchAddTrain } from './modal';
import { BasicForm, useForm } from '@/components/Form';
import type { Dayjs } from 'dayjs';
import { batchUpdateTrainingNumber } from '@/api/applay/trainlist/self'

const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
  labelWidth: 100,
  baseColProps: { span: 24 },
  schemas: batchAddTrain,
  showActionButtonGroup: false,
});
const treeData = ref();
const isUpdate = ref(true);
const getTitle = computed(() =>
  treeData.value == 0 ? '新增培训' :  '编辑培训',
);
const selectList = ref([])
const [batchModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  treeData.value = data?.nums;
  console.log(data.value);
  selectList.value = data.value
});
// let year = ref();
// const handleChangeYear = (value) => {
//     const selectedYear = new Date(value).getFullYear();
//     year.value = selectedYear;
//   };
// type RangeValue = [Dayjs, Dayjs];
// const dates = ref<RangeValue>();
// const value = ref<RangeValue>();
// const hackValue = ref<RangeValue>();
// const disabledDate = (current: Dayjs) => {
//   if (!dates.value || (dates.value as any).length === 0) {
//     return false;
//   }
//   const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 7;
//   const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 7;
//   return tooEarly || tooLate;
// };
// const onOpenChange = (open: boolean) => {
//   if (open) {
//     dates.value = [] as any;
//     hackValue.value = [] as any;
//   } else {
//     hackValue.value = undefined;
//   }
// };

// const onChange = (val: RangeValue) => {
//   value.value = val;
// };

// const onCalendarChange = (val: RangeValue) => {
//   dates.value = val;
// };
const emit = defineEmits(['success', 'register']);
async function handleSubmit() {
    const values = await validate();
    setModalProps({ confirmLoading: true });
    try {
      let params = {
        ...values,
        trainingNumberList: selectList.value.map((v:any) => v.trainingNumberId)
      }
      const res = await batchUpdateTrainingNumber(params);
      if(res?.code && res.code != '10000'){
        message.error(res.msg)
      }else{
        emit('success', params)
      }
    } finally {
      setModalProps({ confirmLoading: false });
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang='less' scoped>
  :deep(.ant-modal){
    width: 550px!important;
  }
</style>